<template>
  <div>
    <el-button type="primary" @click="openAddDialog">添加用户</el-button>

    <el-table :data="users" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="tel" label="电话" width="150"></el-table-column>
      <el-table-column prop="sfID" label="身份证号" width="200"></el-table-column>
      <el-table-column prop="sex" label="性别" width="80"></el-table-column>
      <el-table-column prop="points" label="积分" width="100"></el-table-column>
      <el-table-column prop="money" label="余额" width="100"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" v-model="isEditDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="用户名">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="editForm.sfID"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editForm.sex">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="editForm.points" type="number"></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="editForm.money" type="number"></el-input>
        </el-form-item>
      </el-form> 
      <!-- eslint-disable-next-line -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">确认</el-button>
      </div>
    </el-dialog>

    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" v-model="isAddDialogVisible">
      <el-form :model="addForm">
        <el-form-item label="用户名">
          <el-input v-model="addForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="addForm.sfID"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addForm.sex">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="addForm.points" type="number"></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="addForm.money" type="number"></el-input>
        </el-form-item>
      </el-form>
      <!-- eslint-disable-next-line -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserList, deleteUser as deleteUserAPI, updateUser as updateUserAPI, registerUser as addUserAPI } from '@/api/user.js'
import { ElMessageBox, ElMessage } from 'element-plus'

const users = ref([])

const fetchUsers = async () => {
  try {
    const response = await getUserList()
    if (response.code === 1) {
      users.value = response.data
    } else {
      throw new Error(response.msg)
    }
  } catch (error) {
    console.error('Error fetching users:', error)
  }
}

const isEditDialogVisible = ref(false)
const editForm = ref({
  id: '',
  userName: '',
  name: '',
  tel: '',
  sfID: '',
  sex: '',
  points: '',
  money: ''
})

const isAddDialogVisible = ref(false)
const addForm = ref({
  userName: '',
  name: '',
  tel: '',
  sfID: '',
  sex: '',
  password: '',
  points: '',
  money: ''
})

const openEditDialog = (user) => {
  editForm.value = { ...user }
  isEditDialogVisible.value = true
}

const openAddDialog = () => {
  addForm.value = {
    userName: '',
    name: '',
    tel: '',
    sfID: '',
    sex: '',
    password: '',
    points: '',
    money: ''
  }
  isAddDialogVisible.value = true
}

const updateUser = async () => {
  try {
    await updateUserAPI(editForm.value)
    ElMessage({
      type: 'success',
      message: '更新成功!',
    })
    isEditDialogVisible.value = false
    fetchUsers()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '更新失败',
    })
    console.error('Error updating user:', error)
  }
}

const addUser = async () => {
  try {
    await addUserAPI(addForm.value)
    ElMessage({
      type: 'success',
      message: '添加成功!',
    })
    isAddDialogVisible.value = false
    fetchUsers()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '添加失败',
    })
    console.error('Error adding user:', error)
  }
}

const deleteUser = async (id) => {
  try {
    await ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await deleteUserAPI(id)
    ElMessage({
      type: 'success',
      message: '删除成功!',
    })
    fetchUsers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage({
        type: 'error',
        message: '删除失败',
      })
    }
  }
}

onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
/* 添加你的样式 */
</style>
